<template>
	<view>
		<text style="color: #000000;" class="text-gray" v-if="waiting">({{sec}}s)</text>
		<text style="color: #000000;" :class="[mobile==''?'text-gray':'text-'+theme]" @tap="getSms" v-else>获取验证码</text>
	</view>
</template>

<script>
	export default {
		props: {
			mobile: {
				type: String,
				default: ''
			},
			usage: {
				type: String,
				default: 'login'
			},
		},
		data() {
			return {
				theme: this.$config.THEME(),
				sms: '',
				loading: false,
				waiting: false,
				maxSec: 60,
				sec: 0,
			}
		},
		methods: {
			mathSec() {
				if (this.waiting) {
					setTimeout((r) => {
						this.sec--
						if (this.sec <= 0) {
							this.waiting = false
						}
						this.mathSec()
					}, 1000)
				}
			},
			startMathSec() {
				if (this.waiting) return
				this.waiting = true
				this.sec = this.maxSec
				this.mathSec()
			},
			getSms() {
				if (!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
					this.$common.showError('请输入正确的电话号码')
					return
				}
				if (this.loading) return
				this.loading = true
				uni.showLoading({
					title: "获取验证码..."
				})
				this.$http
					.post('sms_code', {
						mobile: this.mobile,
						usage: this.usage,
					})
					.then((response) => {
						console.log(response)
						// this.$common.showSuccess('验证码：'+response.data.data)
						this.$common.showSuccess('发送成功')
						this.startMathSec()
						this.loading = false
					})
					.catch((response) => {
						this.loading = false
					})
			}
		},
	}
</script>

<style>
</style>
